<!DOCTYPE html>
<html slick-uniqueid="3"><head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">

		
			<script type="text/javascript" src="a_data/moo-clientcide-1.js"></script>

		

		<script type="text/javascript" src="a_data/rainbow-custom.js"></script>

		<script type="text/javascript" src="a_data/embeddable.js"></script>

		<link rel="stylesheet" type="text/css" href="a_data/twilight-contrast.css">

		<link rel="stylesheet" type="text/css" href="a_data/normalize.css">


		

		
			<link rel="stylesheet" type="text/css" href="a_data/embedded-light.css">

		

		<script type="text/javascript">
			var height,
				force_height = null,
				show_src = "http://fiddle.jshell.net/Gajotres/8uac7/show/light/",
				resize_element_counter = 0,
				shell_edit_url = '/Gajotres/8uac7/light/';

			
		</script>
	<style id="defaultStickyWinStyle">div.DefaultStickyWin {font-family:verdana; font-size:11px; line-height: 13px;position: relative;}div.DefaultStickyWin div.top{-moz-user-select: none;-khtml-user-select: none;}div.DefaultStickyWin div.top_ul{background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/full.png) top left no-repeat; height:30px; width:15px; float:left}div.DefaultStickyWin div.top_ur{position:relative; left:0px !important; left:-4px; background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/full.png) top right !important; height:30px; margin:0px 0px 0px 15px !important; margin-right:-4px; padding:0px}div.DefaultStickyWin h1.caption{clear: none !important; margin:0px !important; overflow: hidden; padding:0 !important; font-weight:bold; color:#555; font-size:14px !important; position:relative; top:8px !important; left:5px !important; float: left; height: 22px !important;}div.DefaultStickyWin div.middle, div.DefaultStickyWin div.closeBody {background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/body.png) top left repeat-y; margin:0px 20px 0px 0px !important;	margin-bottom: -3px; position: relative;	top: 0px !important; top: -3px;}div.DefaultStickyWin div.body{background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/body.png) top right repeat-y; padding:8px 23px 8px 0px !important; margin-left:5px !important; position:relative; right:-20px !important; z-index: 1;}div.DefaultStickyWin div.bottom{clear:both;}div.DefaultStickyWin div.bottom_ll{background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/full.png) bottom left no-repeat; width:15px; height:15px; float:left}div.DefaultStickyWin div.bottom_lr{background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/full.png) bottom right; position:relative; left:0px !important; left:-4px; margin:0px 0px 0px 15px !important; margin-right:-4px; height:15px}div.DefaultStickyWin div.closeButtons{text-align: center; background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/body.png) top right repeat-y; padding: 4px 30px 8px 0px; margin-left:5px; position:relative; right:-20px}div.DefaultStickyWin a.button:hover{background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/big_button_over.gif) repeat-x}div.DefaultStickyWin a.button {background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/big_button.gif) repeat-x; margin: 2px 8px 2px 8px; padding: 2px 12px; cursor:pointer; border: 1px solid #999 !important; text-decoration:none; color: #000 !important;}div.DefaultStickyWin div.closeButton{width:13px; height:13px; background:url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/closebtn.gif) no-repeat; position: absolute; right: 0px; margin:10px 15px 0px 0px !important; cursor:pointer;top:0px}div.DefaultStickyWin div.dragHandle {	width: 11px;	height: 25px;	position: relative;	top: 5px;	left: -3px;	cursor: move;	background: url(http://github.com/anutron/clientcide/raw/master/Assets/stickyWinHTML/drag_corner.gif); float: left;}</style></head>
	<body>
		<div id="wrapper">
			<div id="head">
				<h1><a title="Edit in JSFiddle" href="http://jsfiddle.net/Gajotres/8uac7/light/" target="new">Edit in JSFiddle</a></h1>
				<div id="actions">
					<ul class="normalRes">
						
							<li class="active">
								<a title="Result" data-trigger-type="result" href="#Result">Result</a>
							</li>
						
							<li>
								<a title="JavaScript" data-trigger-type="js" href="#JavaScript">JavaScript</a>
							</li>
						
							<li>
								<a title="Resources" data-trigger-type="resources" href="#Resources">Resources</a>
							</li>
						
							<li>
								<a title="HTML" data-trigger-type="html" href="#HTML">HTML</a>
							</li>
						
							<li>
								<a title="CSS" data-trigger-type="css" href="#CSS">CSS</a>
							</li>
						
					</ul>

					<select class="lowRes">
						
							<option data-trigger-type="result" selected="selected">Result</option>
						
							<option data-trigger-type="js">JavaScript</option>
						
							<option data-trigger-type="resources">Resources</option>
						
							<option data-trigger-type="html">HTML</option>
						
							<option data-trigger-type="css">CSS</option>
						
					</select>
				</div>
			</div>

			<div style="height: 498px;" id="tabs">
				
					<div class="tCont result active" id="result"><iframe style="height: 500px;" src="a_data/a.htm"></iframe></div>
						
							<script type="text/javascript">
								window.addEvent('load', function(){
									loadResult();
								});
							</script>
						
					
				
					
						
							<pre data-language="js" class="js tCont  rainbow">$(document).<span class="function call">on</span>(<span class="string">'pageinit'</span>, <span class="string">'#home'</span>, <span class="keyword">function</span>(){      
    <span class="keyword">var</span> url <span class="keyword operator">=</span> <span class="string">'http://api.themoviedb.org/3/'</span>,
        mode <span class="keyword operator">=</span> <span class="string">'search/movie?query='</span>,
        movieName <span class="keyword operator">=</span> <span class="string">'&amp;query='</span><span class="keyword operator">+</span><span class="function call">encodeURI</span>(<span class="string">'Batman'</span>),        
        key <span class="keyword operator">=</span> <span class="string">'&amp;api_key=470fd2ec8853e25d2f8d86f685d2270e'</span>;        
    
    $.<span class="function call">ajax</span>({
        url: url <span class="keyword operator">+</span> mode <span class="keyword operator">+</span> key <span class="keyword operator">+</span> movieName ,
        dataType: <span class="string">"jsonp"</span>,
        async: <span class="constant language">true</span>,
        success: <span class="storage function">function</span> (result) {
            ajax.<span class="function call">parseJSONP</span>(result);
        },
        error: <span class="storage function">function</span> (request,error) {
            <span class="function call">alert</span>(<span class="string">'Network error has occurred please try again!'</span>);
        }
    });         
});

$(document).<span class="function call">on</span>(<span class="string">'pagebeforeshow'</span>, <span class="string">'#headline'</span>, <span class="keyword">function</span>(){      
    $(<span class="string">'#movie-data'</span>).<span class="function call">empty</span>();
    $.<span class="function call">each</span>(movieInfo.result, <span class="keyword">function</span>(i, row) {
        <span class="keyword">if</span>(row.id <span class="keyword operator">=</span><span class="keyword operator">=</span> movieInfo.id) {
            $(<span class="string">'#movie-data'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;&lt;img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'</span><span class="keyword operator">+</span>row.poster_path<span class="keyword operator">+</span>'"<span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>');
            $(<span class="string">'#movie-data'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;Title: '</span><span class="keyword operator">+</span>row.original_title<span class="keyword operator">+</span>'<span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>');
            $(<span class="string">'#movie-data'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;Release date'</span><span class="keyword operator">+</span>row.release_date<span class="keyword operator">+</span>'<span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>');
            $(<span class="string">'#movie-data'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;Popularity : '</span><span class="keyword operator">+</span>row.popularity<span class="keyword operator">+</span>'<span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>');   
            $(<span class="string">'#movie-data'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;Popularity : '</span><span class="keyword operator">+</span>row.vote_average<span class="keyword operator">+</span>'<span class="keyword operator">&lt;</span>/li<span class="keyword operator">&gt;</span>');             
            $(<span class="string">'#movie-data'</span>).<span class="function call">listview</span>(<span class="string">'refresh'</span>);            
        }
    });    
});

$(document).<span class="function call">on</span>(<span class="string">'vclick'</span>, <span class="string">'#movie-list li a'</span>, <span class="keyword">function</span>(){  
    movieInfo.id <span class="keyword operator">=</span> $(<span class="keyword">this</span>).<span class="function call">attr</span>(<span class="string">'data-id'</span>);
    $.mobile.<span class="function call">changePage</span>( <span class="string">"#headline"</span>, { transition: <span class="string">"slide"</span>, changeHash: <span class="constant language">false</span> });
});

<span class="keyword">var</span> movieInfo <span class="keyword operator">=</span> {
    id : <span class="constant language">null</span>,
    result : <span class="constant language">null</span>
}

<span class="keyword">var</span> ajax <span class="keyword operator">=</span> {  
    parseJSONP:<span class="keyword">function</span>(result){  
        movieInfo.result <span class="keyword operator">=</span> result.results;
        $.<span class="function call">each</span>(result.results, <span class="keyword">function</span>(i, row) {
            console.<span class="function call">log</span>(JSON.<span class="function call">stringify</span>(row));
            $(<span class="string">'#movie-list'</span>).<span class="function call">append</span>(<span class="string">'&lt;li&gt;&lt;a href="" data-id="'</span> <span class="keyword operator">+</span> row.id <span class="keyword operator">+</span> <span class="string">'"&gt;&lt;img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'</span><span class="keyword operator">+</span>row.poster_path<span class="keyword operator">+</span>'"/<span class="keyword operator">&gt;</span><span class="keyword operator">&lt;</span>h3<span class="keyword operator">&gt;</span>' <span class="keyword operator">+</span> row.title <span class="keyword operator">+</span> <span class="string">'&lt;/h3&gt;&lt;p&gt;'</span> <span class="keyword operator">+</span> row.vote_average <span class="keyword operator">+</span> <span class="string">'/10&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;'</span>);
        });
        $(<span class="string">'#movie-list'</span>).<span class="function call">listview</span>(<span class="string">'refresh'</span>);
    }
}
</pre>
						
					
				
					
						<div class="resources tCont" id="resources">
							<h3>Following resources are loaded into result:</h3>
							<ol>
								
									<li><a href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js" title="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js">jquery.mobile-1.4.0-beta.1.min.js</a></li>
								
									<li><a href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css" title="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css">jquery.mobile-1.4.0-beta.1.min.css</a></li>
								
									<li><a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css" title="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">jquery.mobile.iscrollview.css</a></li>
								
									<li><a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css" title="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">jquery.mobile.iscrollview-pull.css</a></li>
								
									<li><a href="http://example.gajotres.net/iscrollview/iscroll.js" title="http://example.gajotres.net/iscrollview/iscroll.js">iscroll.js</a></li>
								
									<li><a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js" title="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js">jquery.mobile.iscrollview.js</a></li>
								
							</ol>
						</div>
						
					
				
					
						
							<pre data-language="html" class="html tCont  rainbow"><span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">page</span><span class="string quote">"</span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">home</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-theme</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">a</span><span class="string quote">"</span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">header</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h3</span></span><span class="support tag close">&gt;</span>
            Movie List
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h3</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>        
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">content</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">example-wrapper</span><span class="string quote">"</span> data-iscroll<span class="support tag close">&gt;</span>
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">listview</span><span class="string quote">"</span>  <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">movie-list</span><span class="string quote">"</span> <span class="support attribute">data-theme</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">a</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
                
            <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-theme</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">a</span><span class="string quote">"</span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">footer</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h1</span></span><span class="support tag close">&gt;</span>Copyright 2013<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h1</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>              
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">page</span><span class="string quote">"</span> <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">headline</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-theme</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">a</span><span class="string quote">"</span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">header</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">a</span></span> <span class="support attribute">href</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">#home</span><span class="string quote">"</span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">ui-btn-left</span><span class="string quote">"</span> <span class="support attribute">data-transition</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">slide</span><span class="string quote">"</span> <span class="support attribute">data-direction</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">reverse</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Back<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">a</span></span><span class="support tag close">&gt;</span>                        
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">h3</span></span><span class="support tag close">&gt;</span>
            Movie Info
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">h3</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>        
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">content</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">ul</span></span> <span class="support attribute">data-role</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">listview</span><span class="string quote">"</span>  <span class="support attribute">id</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">movie-data</span><span class="string quote">"</span> <span class="support attribute">data-theme</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">a</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
            
        <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">ul</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>    
</pre>
						
					
				
					
						
							<pre data-language="css" class="css tCont  rainbow"><span class="entity name class">.ui-content</span> {
    <span class="support css-property">padding</span>: <span class="constant numeric">0</span> !important;
}
 
<span class="entity name class">.ui-listview</span> {
    <span class="support css-property">margin</span>: <span class="constant numeric">0</span> !important;
}
 
<span class="entity name class">.example-wrapper</span>, <span class="entity name class">.example-wrapper</span> <span class="entity name tag">div</span><span class="entity name class">.iscroll-scroller</span> {
    <span class="support css-property">width</span>: <span class="constant numeric">100</span><span class="keyword unit">%</span> !important;
}</pre>
						
					
				
			</div>
		</div>

	  
	    <script type="text/javascript">
	      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	    </script><script src="a_data/ga.js" type="text/javascript"></script>
	    <script type="text/javascript">
	      try {
	        var pageTracker = _gat._getTracker('UA-366077-13');
	        pageTracker._trackPageview();
	      } catch(err) {}
	    </script>
	  
	

</body></html>